﻿@{ 
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站管理系统</title>

    <link href="~/lib/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/vue-append/vue-append.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.js"></script>
    <script src="~/js/utils.js"></script>

    <style>
        .containerBody {
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }

        .el-header, .el-footer {
            background-color: #fff;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            background-color: #314155;
            color: #333;
        }

        .el-menu--collapse {
            width: 48px !important;
        }

        .el-main {
            color: #333;
            padding: 0px;
            overflow:hidden !important;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }



        .el-tabs__content {
            height: calc(100% - 40px);
        }

        .el-tabs__active-bar {
        }

        .el-tabs__item.is-active {
            color: #fff !important;
            background-color: #42b983 !important;
        }


        .el-tabs__nav {
        }

        div.el-tabs__header.is-top {
            padding: 0;
            position: relative;
            margin: 0 0 5px;
        }

        .contextmenu {
            width: 80px;
            margin: 0;
            border: 1px solid #ccc;
            background: #fff;
            z-index: 3000;
            position: absolute;
            list-style-type: none;
            padding: 5px 0;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
        }

            .contextmenu li {
                margin: 0;
                padding: 0px 0px;
                text-align: center;
            }

                .contextmenu li:hover {
                    background: #f2f2f2;
                    cursor: pointer;
                }

                .contextmenu li button {
                    color: #2c3e50;
                }

        .remoteTabDiv {
            height: 98%;
            margin: 0;
            width: 99.4%;
        }

        .asideDiv {
            background-color: #223142;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .localTabDiv {
            height: 98%;
            width: 99.4%;
            padding-top: 5px;
            padding-left: 10px;
            overflow-y: auto;
        }

        .el-tabs--border-card > .el-tabs__content {
            padding: 0px;
            overflow-y: auto;
            overflow-x: hidden;
            position: absolute;
            width: 100%;
            top: 29px;
            bottom: 0px;
        }

        #innerTab .el-tabs__content {
            height: 100%;
            box-sizing: border-box;
            overflow-y: auto;
        }

        .el-main {
            display: block;
            flex: 1;
            flex-basis: auto;
            overflow: auto;
            box-sizing: border-box;
            padding: 0px;
        }

        .el-tab-pane {
            position: absolute;
            width: 100%;
            top: 0px;
            bottom: 0px;
        }


        .contextmenu {
            width: 100px;
            margin: 0;
            border: 1px solid #ccc;
            background: #fff;
            z-index: 3000;
            position: absolute;
            list-style-type: none;
            padding: 5px 0;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
        }

            .contextmenu li {
                margin: 0;
                padding: 0px 22px;
            }

                .contextmenu li:hover {
                    background: #f2f2f2;
                    cursor: pointer;
                }

                .contextmenu li button {
                    color: #2c3e50;
                }


        .screenfull-svg {
            display: inline-block;
            cursor: pointer;
            fill: #000;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        .hamburger-out {
            width: 100%;
            float: left;
            text-align: left;
            margin-left: 10px;
            vertical-align: middle;
            cursor: pointer
        }

        .hamburger {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
        }

            .hamburger.is-active {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }
    </style>
    <script>

    </script>
</head>
<body class="containerBody">
    <el-container id="_mainApp">
        <el-aside width="200" style="float:left;">
            <el-menu class="el-menu-vertical-demo" :default-active="defaultActiveId"
                     background-color="#314155"
                     text-color="#fff"
                     active-text-color="#ffd04b"  :unique-opened="true"
                     :collapse="isCollapse" :style="defaultStyle">
                <el-submenu :index="item.id"   v-for="(item, index) in menuTabs">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        {{item.name}}
                    </template>
                    <el-menu-item-group>
                        <el-menu-item :index="child.id" v-on:click="addTab(child)" v-for="(child, childindex) in item.children">
                            <i :class="child.icon"></i>{{child.name}}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container style="float:left;overflow:hidden;" id="mainContainer">
            <el-header style="text-align: right; font-size: 12px;padding:0px;">
                <div style="line-height:60px;height:60px;">
                    <el-row class="container" style="border-bottom:1px solid #ccc">
                        <el-col style="width:25px;">
                            <div v-on:click="toggleSideBar" class="hamburger-out">
                                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24" :class="isCollapse==false?'hamburger is-active':'hamburger'">
                                    <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"></path>
                                </svg>
                            </div>
                        </el-col>
                        <el-col :span="11" :xs="11" :sm="11" :lg="11" class="topbar-wrap" style="text-align:left;">

                            <div class="grid-content bg-info" style="font-size:24px;margin-left:20px;">网站管理系统</div>
                        </el-col>
                        <el-col :span="12" :xs="12" :sm="12" :lg="12" class="topbar-wrap">
                            <el-col style="float: right; text-align: left;width:80px; margin-left: 20px;  cursor:pointer">
                                <div class="topbar-account topbar-btn">
                                    <el-dropdown trigger="click">
                                        <span class="el-dropdown-link userinfo-inner">
                                            <i class="iconfont icon-user"></i> 管理员 <i class="el-icon-caret-bottom"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item v-on:click.native="openModifyPassword()">修改密码</el-dropdown-item>
                                            <el-dropdown-item v-on:click.native="loginOut()">退出登录</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </el-col>
                            <el-col style="float: right;width:50px;">
                                <div v-on:click="handleFullScreen" :title="fullscreen?`取消全屏`:`全屏`">
                                    <svg v-if="fullscreen==false" class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" fill="white">
                                        <path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"></path>
                                        <path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"></path>
                                        <path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"></path>
                                        <path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"></path>
                                    </svg>
                                    <svg v-else class="screenfull-svg" viewBox="0 0 160 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" fill="white">
                                        <path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"></path>
                                    </svg>
                                </div>
                            </el-col>
                        </el-col>

                    </el-row>
                </div>
            </el-header>
            <el-main style="padding:0px;margin:0px;">

                <el-container>
                    <el-tabs v-model="activeid" v-on:tab-remove="removeTab" v-on:contextmenu.prevent.native="openContextMenu" type="card" :style="tabConentStyle">
                        <template v-for="(item, index) in headerTabs">
                            <el-tab-pane :key="item.id"
                                         :label="item.name"
                                         :name="item.id" :closable="item.closable">

                                <iframe :style="tabConentIframeStyle" :id="item.iframeid" frameborder="0" :src="item.path"></iframe>

                            </el-tab-pane>
                        </template>

                    </el-tabs>
                </el-container>
            </el-main>
        </el-container>

        <div v-show="contextMenu.visible">
            <ul :style="contextMenu.menuContainerStyle" class="contextmenu">
                @*<li><el-button type="text" v-on:click="curTabReload()" size="mini">重新加载</el-button></li>*@
                <li><el-button type="text" v-on:click="closeAllTabs()" size="mini">关闭所有</el-button></li>
                <li><el-button type="text" v-on:click="closeOtherTabs('left')" :disabled="contextMenu.isDisabledCloseLeftBtnFlag" size="mini">关闭左边</el-button></li>
                <li><el-button type="text" v-on:click="closeOtherTabs('right')" :disabled="contextMenu.isDisabledCloseRightBtnFlag" size="mini">关闭右边</el-button></li>
                <li><el-button type="text" v-on:click="closeOtherTabs('other')" size="mini">关闭其他</el-button></li>
            </ul>
        </div>



        <el-dialog title="修改密码"
                   :visible.sync="modifypassworddialogVisible"
                   width="450px" border="true"  size="mini">
            <el-form :model="modifyForm" :rules="modifyFormRules" 
                     ref="modifyFormRules" 
                     label-width="80px" size="mini">

                <el-form-item prop="password" label="原密码" size="mini">
                    <el-input type="password"
                              v-model="modifyForm.password"
                              auto-complete="off"
                              placeholder="原密码" value=""  ></el-input>
                </el-form-item>
                <el-form-item prop="newPassword" label="新密码" size="mini">
                    <el-input type="password"
                              v-model="modifyForm.newPassword"
                              auto-complete="off"
                              placeholder="新密码"  value=""  ></el-input>
                </el-form-item>
                <el-form-item prop="comfirmNewPassword" label="确认密码" size="mini">
                    <el-input type="password"
                              v-model="modifyForm.comfirmNewPassword"
                              auto-complete="off"
                              placeholder="确认密码" value="" ></el-input>
                </el-form-item> 
            </el-form>
            <span slot="footer" class="dialog-footer"  size="mini">
                <el-button @@click="modifypassworddialogVisible = false"  size="mini">取 消</el-button>
                <el-button type="primary" @@click="modifyPassword()"  size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>


    <script src="~/js/layout.js"></script>

  
</body>
</html>